doctype html
html(lang="en" ng-app="Netshell")
	head
		meta(charset="UTF-8")
		meta(http-equiv="X-UA-Compatible" content="IE=edge,chrome=1")
		meta(name="viewport" content="width=device-width, initial-scale=1.0")
		title Netshell
		link(rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/css/semantic.min.css")
		link(rel="stylesheet" href="/assets/css/app.css")
	body(ng-controller="AppCtrl")
		#menu.ui.large.vertical.inverted.labeled.icon.sidebar.menu.active
			a.hide.item
				i.close.icon
				| Close Menu
			a.item(href='/build/semantic.zip')
				i.inverted.circular.red.awesome.download.cloud.icon
				b Download
			.item
				a(href='/')
				b Introduction
				.menu
				a.item(href='/introduction/definitions.html') Definitions
				a.item(href='/introduction/overview.html') Overview
				a.item(href='/introduction/types.html') Types
				a.item(href='/introduction/variations.html') Variations
				a.item(href='/introduction.html') What's Different
			.item
				b Project
				.menu
				a.item(href='/project/contributing.html') Contributing
				a.item(href='/project/development.html') Local Docs
			.item
				a(href='/element.html')
				b Elements
				.menu
				a.item(href='/elements/button.html') Button
				a.item(href='/elements/divider.html') Divider
				a.item(href='/elements/header.html') Header
				a.item(href='/elements/icon.html') Icon
				a.item(href='/elements/image.html') Image
				a.item(href='/elements/input.html') Input
				a.item(href='/elements/label.html') Label
				a.item(href='/elements/loader.html') Loader
				a.item(href='/elements/progress.html') Progress
				a.item(href='/modules/reveal.html') Reveal
				a.item(href='/elements/segment.html') Segment
				a.item(href='/elements/step.html') Step
			.item
				a(href='/collection.html')
				b Collections
				.menu
				a.item(href='/collections/breadcrumb.html') Breadcrumb
				a.item(href='/collections/form.html') Form
				a.item(href='/collections/grid.html') Grid
				a.item(href='/collections/menu.html') Menu
				a.item(href='/collections/message.html') Message
				a.item(href='/collections/table.html') Table
			.item
				b Views
				.menu
				a.item(href='/views/comment.html') Comment
				a.item(href='/views/feed.html') Feed
				a.item(href='/views/item.html') Item
				a.item(href='/views/list.html') List
			.item
				a(href='/module.html')
				b Modules
				.menu
				a.item(href='/modules/accordion.html') Accordion
				a.item(href='/modules/checkbox.html') Checkbox
				a.item(href='/modules/dimmer.html') Dimmer
				a.item(href='/modules/dropdown.html') Dropdown
				a.item(href='/modules/modal.html') Modal
				a.item(href='/modules/popup.html') Popup
				a.item(href='/modules/rating.html') Rating
				a.item(href='/modules/shape.html') Shape
				a.item(href='/modules/sidebar.html') Sidebar
				a.item(href='/modules/transition.html') Transition
			.item
				b Behavior
				.menu
				a.item(href='/modules/form.html') Form Validation
			.item
				b Style Guide
				.menu
				a.item(href='/guide/cssguide.html') CSS
				a.item(href='/guide/javascriptguide.html') Javascript
				a.item(href='/guide/styleguide.html') Language
			.ui.fixed.transparent.inverted.main.menu
			.container
				a.launch.item
				i.icon.list.layout
				| Content
				.title.item
				b Semantic:
				| UI Modules
				a.icon.item(href='/element.html')
				i.left.arrow.icon
				.section.ui.dropdown.link.item
				span.count 4 of 4
				.menu
					.item
					a(href='/index.html') 1. Introduction
					.item
					a(href='/collection.html') 2. UI Collections
					.item
					a(href='/element.html') 3. UI Elements
					.active.item
					a(href='/module.html') 4. UI Modules
				.disabled.icon.item
				i.right.arrow.icon
			.ui.black.huge.launch.right.attached.button(style='width: 70px;')
			i.icon.list.layout
			span.text(style='display: none;') Menu
			.tab.segment
			.container
				.introduction
				h1.ui.dividing.header
					| UI Modules
				p
					| Modules are interface elements whose behavior is an essential part of their definition
				.advertisement
				#carbonads-container
					.carbonad
					#azcarbon
					script(type='text/javascript', async='', src='http://engine.carbonads.com/z/51619/azcarbon_2_1_0_HORIZ')
					script(type='text/javascript')
						var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/51619/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);
				.four.item.tabular.ui.menu
				a.item.active(data-tab='overview') Overview
				a.item(data-tab='init') Initializing
				a.item(data-tab='behavior') Behaviors
				a.item(data-tab='settings') Settings
				.fluid.vertical.ui.menu
				a.item.active(data-tab='overview') Overview
				a.item(data-tab='init') Initializing
				a.item(data-tab='behavior') Behaviors
				a.item(data-tab='settings') Settings
			.main.container
			.ui.tab.active(data-tab='overview')
				p
				| All official javascript modules in Semantic are designed using a singular design pattern. This pattern allows several useful features common to all javascript components
				.ui.relaxed.list
				.item
					i.check.icon
					.content
					.header Run-time Performance Analysis
					p
						| Semantic modules all provide the ability to log performance traces to the console, allowing you to see which aspects of the module are more or less performant and to track total init time
						code onDomReady
				.item
					i.check.icon
					.content
					.header Human Readable Traces
					p
						| Unlike other component libraries that hide explanations of behavior in inline comments which can only be read by combing the source, semantic modules provide run-time debug output to the JavaScript console telling you what each component is doing as it is doing it.
				.item
					i.check.icon
					.content
					.header Settings can be overwritten after initialization
					p
						| Semantic provides methods to set default settings, set settings at initialization, and set settings after initialization, allowing complete flexibility over component behaviors.
				.item
					i.check.icon
					.content
					.header All modules include an initialize and destroy method
					p
						| All events and metadata are namespaced and can be removed after initialization, modules automatically handle destroy/init events to allow users to lazy-initialize a plugin multiple times with no issues.
				.item
					i.check.icon
					.content
					.header Instance available in metadata
					p
						| Modules store their instance in metadata meaning that, in a pinch, you can directly modify the instance of a UI element by modifying its properties.
				.ui.divider
				a.ui.large.secondary.labeled.icon.button(href='/spec/docs/modal.commented.html')
				i.info.icon
				| Real World Commented Example
				a.ui.large.black.labeled.icon.button(href='/spec/docs/module.commented.html')
				i.info.icon
				| Commented Design Pattern
			.ui.tab(data-tab='init')
				h3.ui.header Overview
				p
				| Semantic does not automatically attach any events on page load. You must decide which modules to initialize on each page by initializing a module in javascript.
				.ui.info.message
				| It's okay to initialize an element multiple times, the element will automatically destroy the previous instance and re-initialize with the settings provided.
				h3.ui.header Example of Initializing
				p
				| The following example shows how to attach behavior to elements on a page using Semantic
				.code(data-type='html', data-preview='true')
				.ui.medium.image
					.ui.corner.label
					i.help.link.icon(data-content='This appears to the right')
					img(src='/images/demo/photo.jpg', data-content='This appears in the default location')
				.evaluated.code(data-type='javascript')
				| // just initializing
				| $('.ui.image img')
				| .popup()
				| ;
				.evaluated.code(data-type='javascript')
				| // initializing with settings
				| $('.ui.image .help')
				| .popup({
				| position: 'right center'
				| })
				| ;
			.ui.tab(data-tab='behavior')
				.fixed.column
				.content
					h3.ui.header Demo Element
					i.demo.circular.help.link.icon(data-content='Popup #1')
					i.demo.circular.help.link.icon(data-content='Popup #2')
					.ui.raised.segment
					.ui.top.attached.label Console
					pre.console.
						
				.examples
				h2.ui.dividing.header Using Module Behaviors
				p
					| Behaviors are an element's API. They invoke functionality or return aspects of the current state for an element
				p
					| Behaviors can be called using spaced words, camelcase or dot notation. The preferred method however is
					b spaced words
					| . Method lookup is done automatically internally.
				p Behaviors can be called using the syntax:
				.code
					| // both are the same
					| $('.your.element')
					| .module('behavior name', argumentOne, argumentTwo)
					| .module('behaviorName', argumentOne, argumentTwo)
					| ;
				h3.ui.header Common Behaviors
				p
					| All modules have a set of core behaviors which allow you to configure the component
				table.ui.celled.definition.sortable.table.segment
					thead
					tr
						th Name
						th Usage
					tbody
					tr
						td initialize
						td Initializes an element, adding page event handlers and init data
					tr
						td destroy
						td Removes all changes to the page made by initialization
					tr
						td refresh
						td Refreshes cached values for a component
					tr
						td setting(setting, value)
						td Allows you to modify or read a component setting
					tr
						td invoke(query, passedArguments, instance)
						td
						| Internal method used for translating sentence case method into an internal method
					tr
						td debug(comment, values)
						td Displays a log if a user has logging enabled
					tr
						td verbose(comment, values)
						td Displays a log if a user has verbose logging enabled
					tr
						td error(name)
						td Displays a name error message from the component's settings
					tr
						td performance log(comment, value)
						td Adds a performance trace for an element
					tr
						td performance display
						td Displays current element performance trace
				h2.ui.dividing.header Examples
				h3.ui.header Overriding Internals
				p
					| Internal methods can be overwritten at run-time for individual instances of a module
				.evaluated.code
					| // initialize both popups inline
					| $('.demo.icon')
					| .popup({
					| inline: true
					| })
					| ;
					| //output the first popup's logs to the page
					| $('.demo.icon').first()
					| .popup('internal', 'debug', function() {
					| $('.console')
					| .append(arguments[0] + "\n")
					| // scroll to bottom
					| .prop('scrollTop', $('.console').prop('scrollHeight') )
					| ;
					| })
					| ;
				h3.ui.header Triggering Behavior
				p
					| Some behaviors can accept arguments, for example a popup
					b show
					| behavior can accept a callback function. This arbitrary example shows opening a popup then changing its position programatically
				.code(data-demo='true')
					| // Sets a popup to top left position with an offset of negative five
					| $('.demo.icon').first()
					| .popup('setting', 'position', 'top right')
					| .popup('show', function() {
					| $(this)
					| .popup('set position', 'right center')
					| ;
					| })
					| ;
				h3.ui.header Returning values
				p
					| Behaviors may also provide an API for accessing a module's internal state. For example popups have a method
					code is visible
					| which returns true or false for whether a popup is currently visible.
				.code(data-demo='true')
					| // returns boolean value instead of jQuery chain
					| $('.demo.icon')
					| .popup('debug', $('.demo.icon').first().popup('is visible') )
					| ;
				.code(data-demo='true')
					| // if selector size > 1 returns array of values [boolean, boolean...]
					| $('.demo.icon')
					| .popup('debug', $('.demo.icon').popup('is visible') )
					| ;
			.ui.tab(data-tab='settings')
				p
				| Unlike many javascript components, anything arbitrary in Semantic is a setting. This means no need to dig inside the internals of the component to alter an expected css selector or class name, simply alter the settings object
				h3.ui.header Common Settings
				p
				| The following is a list of common settings usually found in javascript modules.
				table.ui.celled.sortable.definition.table.segment
				thead
					tr
					th Name
					th Usage
				tbody
					tr
					td name
					td
						| Name used in debug logs to differentiate this widget from other debug statements.
					tr
					td debug
					td Whether to provide standard debug output to console.
					tr
					td performance
					td Whether to provide performance logging to console of internal method calls.
					tr
					td verbose
					td Whether to provide extra debug output to console
					tr
					td namespace
					td
						| Namespace used for DOM event and metadata namespacing. Allows module's destroy method to not affect other modules.
					tr
					td metadata
					td An object containing any metadata attributes used.
					tr
					td selectors
					td
						| An object containing all selectors used in the module, these are usually children of the module.
					tr
					td classNames
					td An object containing all class names used in the module.
					tr
					td errors
					td(colspan='2')
						| A javascript array of error statements used in the plugin. These may sometimes appear to the user, but most often appear in debug statements.
				h3.ui.header Changing Settings
				p
				| The following examples use
				a(href='/modules/popup.html') popup
				| as an example for how to modify settings
				.ui.ordered.very.relaxed.list
				.item
					.header Setting module defaults
					| Default settings for the module can be overridden by modifying
					b $.fn.module.settings
					| .
					br
					.code
					| $.fn.popup.settings.moduleName = 'Godzilla';
				.item
					.header At initialization
					| A settings object can be passed in when initializing the plugin
					br
					.code
					| $('.foo')
					| .popup({
					| moduleName : 'Godzilla',
					| verbose		: true
					| })
					| ;
				.item
					.header After initialization
					| Settings can be changed after a module is initialized by calling the 'settings' method on the module with either a settings object or a name, value pair.
					br
					.code
					| $('.foo')
					| // lets initialize that!
					| .popup()
					| // oh wait forgot something
					| .popup('setting', 'moduleName', 'Godzilla')
					| // and some more things
					| .popup('setting', {
					| debug	 : true,
					| verbose : true
					| })
					| ;
				h3.ui.header Reading Settings
				p
				| Settings can also be read programmatically:
				.code
				| // outputs 'godzilla' (1) or ['godzilla', 'godzilla'...] (2 or more)
				| $('.foo').popup('setting', 'moduleName');
		script(src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js")
		script(src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.15/angular.min.js")
		script(src="//cdnjs.cloudflare.com/ajax/libs/restangular/1.4.0/restangular.min.js")
		script(src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-animate.min.js")
		script(src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js")
		script(src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/javascript/semantic.min.js")
		script(src="/assets/js/app.js")
		script(src="/assets/js/services.js")
		script(src="/assets/js/controllers.js")